<template>
	<view>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			<cu-custom bgColor="bg-gradual-blue" :isBack="true">
				<block slot="content">缴款top10</block>
			</cu-custom>
			<view class="" style="padding-top: 100rpx;">
				<qiun-data-charts 
				      type="bar"
				      :opts="opts"
				      :chartData="chartData"
				    />
			</view>
		
		</scroll-view>
	</view>

</template>

<script>
	import {ACCESS_TOKEN} from '@/common/util/constants.js'
	export default {
		components:{
		 },
		data() {
			return {
				modalName: null,
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					padding: [15,30,0,5],
					enableScroll: true,
					legend: {},
					xAxis: {
					    boundaryGap: "justify",
					    disableGrid: false,
					    min: 0,
					    axisLine: false,
					    max: 70
					},
					yAxis: {
						format: "Ydemo"
					},
					extra: {
					    bar: {
							type: "stack",
							width: 30,
							meterBorde: 1,
							meterFillColor: "#FFFFFF",
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							categoryGap: 2
					    }
					}
				},
				listUrl:'/jmreport/show'
			}
		},
		methods: {
			getServerData(categories,data1) {
			      setTimeout(() => {
			        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			        let res = {
			            categories,
			            series: [
			              {
			                name: "缴款金额",
			                data: data1
			              },
			            ]
			          };
					  console.log(res);
			        this.chartData = JSON.parse(JSON.stringify(res));
			      }, 500);
			},
			getList(){
				let token = uni.getStorageSync(ACCESS_TOKEN);
				let params ={
					token,
					pageNo: 1,
					pageSize: 10,
				}
				this.$http.post(this.listUrl,
					{
						apiUrl:'',
						id:'867261616308572160',
						params : JSON.stringify(params)
					}
				).then(res=>{
						if(res.data.success){
							let categories = [],data1 = []
							// try{
								let list = res.data.result.dataList.sumskje.list
								list.forEach(item=>{
									categories.push(item.qymc)
									data1.push( item.sumskje)
								})
								this.getServerData(categories,data1);
								
							// }catch(e){
							// 	//TODO handle the exception
							// }
							
						}
				})
			}
		},
		onLoad() {
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #fff;
	}
</style>
